<header class="app-bar bg-hero fg-white" data-role="appbar" data-expand="true">
    <button class="nav-button ml-4 d-block d-none-xl">
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
    </button>

    <a href="index.html" class="brand fg-white no-hover text-bold ml-auto ml-0-md d-flex d-none-xl">METRO_4</a>

    <div class="app-bar-container ml-auto d-none d-flex-md">
        <a href="index.html" class="app-bar-item text-upper">Home</a>
        <a href="intro.html" class="app-bar-item text-upper">Get started</a>
        <a href="m4q-about.html" class="app-bar-item text-upper">Components</a>
        <a href="examples.html" class="app-bar-item text-upper">Examples</a>
        <a href="support.html" class="app-bar-item text-upper">Support</a>
        <a href="https://github.com/olton/Metro-UI-CSS" class="app-bar-item text-upper">GitHub</a>
    </div>
</header>

<script>
    $('#header-ver').html(Metro.ver(true));
</script>